<template>
	<view :class="['nav', 'background--custom']"
		:style="{height:`${clientRect.height}px`, 'padding-top':`${clientRect.top}px`}">
		<div class="bg background--custom" :style="customStyle" v-if="customStyle"></div>
		<view class="title">
			{{title}}
		</view>
		<view class="left" :style="{left:`${clientRect.right}px`, height:`${clientRect.height}px`,
			'border-radius': `${clientRect.height/2}px`}">
			<view class="back" @click="handleBack">
				<image class="img" src="/static/img/view/back.png" mode="widthFix"></image>
			</view>
			<view class="center">|</view>
			<view class="homekaytix" @click="handleHome">
				<image class="img" src="/static/img/view/homekaytix.svg" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		navigateBack
	} from '@/scripts/compatible/pageOptions.js'
	import {
		height,
		top,
		right,
	} from '@/scripts/compatible/clientRect.js'
	export default {
		props: {
			title: {
				type: String,
				require: true,
			},
			customStyle: {
				type: String,
			},
		},
		data() {
			return {
				clientRect: {
					height: 32,
					top: 24,
					right: 8,
				},
			}
		},
		mounted() {
			this.clientRect_init()
		},
		methods: {
			handleBack() {
				navigateBack()
			},
			handleHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			clientRect_init() {
				const clientRect = {
					height,
					top,
					right,
				}
				this.$set(this, 'clientRect', clientRect)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding-bottom: 12px;

		.bg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.title {
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			color: #fff;
			width: max-content;
			height: 32px;
			display: flex;
			align-items: center;
			font-size: 16px;
			max-width: 50%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			direction: rtl;
			padding: 0 20px;
			box-sizing: border-box;
			display: block;
			line-height: 32px;
		}

		.left {
			position: absolute;
			margin: auto;
			background-color: rgba(0, 0, 0, .2);
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 6px 0;
			box-sizing: border-box;
			width: max-content;

			.center {
				color: #fff;
			}

			.back,
			.homekaytix {
				width: 20px;
				padding: 0 10px;
			}

			.img {
				display: block;
				width: 100%;
			}
		}
	}
</style>